<template>
  <a-modal
    :width="'50%'"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
    title-align="center"
    title="申请新增好友"
    align-center
    :body-style="{
      display: 'flex',
      justifyContent: 'center'
    }"
  >
    <a-form
      :model="form.data"
      auto-label-width
      layout="vertical"
      style="width: 50%"
    >
      <a-form-item field="name" label="发送新增朋友申请">
        <a-textarea
          v-model="form.data.apply"
          placeholder="请输入"
          allow-clear
          :auto-size="{
            minRows: 3
          }"
        />
      </a-form-item>
      <a-form-item field="nickname" label="设置备注">
        <a-input
          v-model="form.data.nickname"
          placeholder="请输入"
          :max-length="15"
          show-word-limit
          size="large"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import PersonnelIcon from '../../Message/components/PersonnelIcon.vue';
import useClientContactsStore from '@/store/modules/client/contacts/index';
import { cloneDeep } from 'lodash';
import { useRouter } from 'vue-router';

const contactsStore = useClientContactsStore();
const router = useRouter();
const props = withDefaults(
  defineProps<{
    visible: boolean;
    data: any; // 个人信息
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'headerSave']);

const form = reactive({
  data: {
    apply: '',
    nickname: ''
  }
});

watch(
  () => props.visible,
  (val) => {
    if (val) {
      form.data.nickname = props.data.username
        ? props.data.username
        : props.data.name;
    } else {
      form.data = {
        apply: '',
        nickname: ''
      };
    }
  }
);

const handleOk = () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>
<style lang="less" scoped></style>
